
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Instance Methods - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Lato|Inconsolata' rel='stylesheet' type='text/css'>
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "api"
        </script>
        <link rel="stylesheet" href="/css/page.css" type="text/css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API Reference</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
    </ul>
</div>
            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API Reference</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
    </ul>
    <div class="list">
        <h2>Api</h2>
        <ul class="menu-root">
            
                <li><a href="/api/index.html" class="sidebar-link">Overview</a></li>
            
                <li><a href="/api/options.html" class="sidebar-link">Component Options</a></li>
            
                <li><a href="/api/instance-properties.html" class="sidebar-link">Instance Properties</a></li>
            
                <li><a href="/api/instance-methods.html" class="sidebar-link current">Instance Methods</a></li>
            
                <li><a href="/api/global-api.html" class="sidebar-link">Global API</a></li>
            
                <li><a href="/api/directives.html" class="sidebar-link">Directives</a></li>
            
                <li><a href="/api/filters.html" class="sidebar-link">Filters</a></li>
            
        </ul>
    </div>
</div>


<div class="content api with-sidebar">
    <h1>Instance Methods</h1>
    <div id="ad">
        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
    </div>
    <h2 id="Data">Data</h2><blockquote>
<p>You can observe data changes on a Vue instance. Note that all watch callbacks fire asynchronously. In addition, value changes are batched within an event loop. This means when a value changes multiple times within a single event loop, the callback will be fired only once with the latest value.</p>
</blockquote>
<h3 id="vm-$watch(_expression,_callback,_[deep,_immediate]_)">vm.$watch( expression, callback, [deep, immediate] )</h3><ul>
<li><strong>expression</strong> <code>String</code></li>
<li><strong>callback( newValue, oldValue )</strong> <code>Function</code></li>
<li><strong>deep</strong> <code>Boolean</code> <em>optional</em></li>
<li><strong>immediate</strong> <code>Boolean</code> <em>optional</em></li>
</ul>
<p>Watch an expression on the Vue instance for changes. The expression can be a single keypath or actual expressions:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vm.$watch(<span class="string">'a + b'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// do something</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>To also detect nested value changes inside Objects, you need to pass in <code>true</code> for the third <code>deep</code> argument. Note that you don’t need to do so to listen for Array mutations.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vm.$watch(<span class="string">'someObject'</span>, callback, <span class="literal">true</span>)</span><br><span class="line">vm.someObject.nestedValue = <span class="number">123</span></span><br><span class="line"><span class="comment">// callback is fired</span></span><br></pre></td></tr></table></figure>
<p>Passing in <code>true</code> for the fourth <code>immediate</code> argument will trigger the callback immediately with the current value of the expression:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">vm.$watch(<span class="string">'a'</span>, callback, <span class="literal">false</span>, <span class="literal">true</span>)</span><br><span class="line"><span class="comment">// callback is fired immediately with current value of `a`</span></span><br></pre></td></tr></table></figure>
<p>Finally, <code>vm.$watch</code> returns an unwatch function that stops firing the callback:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> unwatch = vm.$watch(<span class="string">'a'</span>, cb)</span><br><span class="line"><span class="comment">// later, teardown the watcher</span></span><br><span class="line">unwatch()</span><br></pre></td></tr></table></figure>
<h3 id="vm-$get(_expression_)">vm.$get( expression )</h3><ul>
<li><strong>expression</strong> <code>String</code></li>
</ul>
<p>Retrieve a value from the Vue instance given an expression. Expressions that throw errors will be suppressed and return <code>undefined</code>.</p>
<h3 id="vm-$set(_keypath,_value_)">vm.$set( keypath, value )</h3><ul>
<li><strong>keypath</strong> <code>String</code></li>
<li><strong>value</strong> <code>*</code></li>
</ul>
<p>Set a data value on the Vue instance given a valid keypath. If the path doesn’t exist it will be created.</p>
<h3 id="vm-$add(_keypath,_value_)">vm.$add( keypath, value )</h3><ul>
<li><strong>keypath</strong> <code>String</code></li>
<li><strong>value</strong> <code>*</code></li>
</ul>
<p>Add a root level property to the Vue instance (and also its <code>$data</code>). Due to the limitations of ES5, Vue cannot detect properties directly added to or deleted from an Object, so use this method and <code>vm.$delete</code> when you need to do so. Additionally, all observed objects are augmented with these two methods too.</p>
<h3 id="vm-$delete(_keypath_)">vm.$delete( keypath )</h3><ul>
<li><strong>keypath</strong> <code>String</code></li>
</ul>
<p>Delete a root level property on the Vue instance (and also its <code>$data</code>).</p>
<h3 id="vm-$eval(_expression_)">vm.$eval( expression )</h3><ul>
<li><strong>expression</strong> <code>String</code></li>
</ul>
<p>Evaluate an expression that can also contain filters.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// assuming vm.msg = 'hello'</span></span><br><span class="line">vm.$<span class="built_in">eval</span>(<span class="string">'msg | uppercase'</span>) <span class="comment">// -&gt; 'HELLO'</span></span><br></pre></td></tr></table></figure>
<h3 id="vm-$interpolate(_templateString_)">vm.$interpolate( templateString )</h3><ul>
<li><strong>templateString</strong> <code>String</code></li>
</ul>
<p>Evaluate a piece of template string containing mustache interpolations. Note that this method simply performs string interpolation; attribute directives are not compiled.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// assuming vm.msg = 'hello'</span></span><br><span class="line">vm.$interpolate(<span class="string">'&#123;&#123;msg&#125;&#125; world!'</span>) <span class="comment">// -&gt; 'hello world!'</span></span><br></pre></td></tr></table></figure>
<h3 id="vm-$log(_[keypath]_)">vm.$log( [keypath] )</h3><ul>
<li><strong>keypath</strong> <code>String</code> <em>optional</em></li>
</ul>
<p>Log the current instance data as a plain object, which is more console-inspectable than a bunch of getter/setters. Also accepts an optional key.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">vm.$log() <span class="comment">// logs entire ViewModel data</span></span><br><span class="line">vm.$log(<span class="string">'item'</span>) <span class="comment">// logs vm.item</span></span><br></pre></td></tr></table></figure>
<h2 id="Events">Events</h2><blockquote>
<p>Each vm is also an event emitter. When you have multiple nested ViewModels, you can use the event system to communicate between them.</p>
</blockquote>
<h3 id="vm-$dispatch(_event,_[args…]_)">vm.$dispatch( event, [args…] )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>args…</strong> <em>optional</em></li>
</ul>
<p>Dispatch an event from the current vm that propagates all the way up to its <code>$root</code>. If a callback returns <code>false</code>, it will stop the propagation at its owner instance.</p>
<h3 id="vm-$broadcast(_event,_[args…]_)">vm.$broadcast( event, [args…] )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>args…</strong> <em>optional</em></li>
</ul>
<p>Emit an event to all children vms of the current vm, which gets further broadcasted to their children all the way down. If a callback returns <code>false</code>, its owner instance will not broadcast the event any further.</p>
<h3 id="vm-$emit(_event,_[args…]_)">vm.$emit( event, [args…] )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>args…</strong> <em>optional</em></li>
</ul>
<p>Trigger an event on this vm only.</p>
<h3 id="vm-$on(_event,_callback_)">vm.$on( event, callback )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code></li>
</ul>
<p>Listen for an event on the current vm.</p>
<h3 id="vm-$once(_event,_callback_)">vm.$once( event, callback )</h3><ul>
<li><strong>event</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code></li>
</ul>
<p>Attach a one-time only listener for an event.</p>
<h3 id="vm-$off(_[event,_callback]_)">vm.$off( [event, callback] )</h3><ul>
<li><strong>event</strong> <code>String</code> <em>optional</em></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>If no arguments are given, stop listening for all events; if only the event is given, remove all callbacks for that event; if both event and callback are given, remove that specific callback only.</p>
<h2 id="DOM">DOM</h2><blockquote>
<p>All vm DOM manipulation methods work like their jQuery counterparts - except they also trigger Vue.js transitions if there are any declared on vm’s <code>$el</code>. For more details on transitions see <a href="/guide/transitions.html">Adding Transition Effects</a>.</p>
</blockquote>
<h3 id="vm-$appendTo(_element|selector,_[callback]_)">vm.$appendTo( element|selector, [callback] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>Append the vm’s <code>$el</code> to target element. The argument can be either an element or a querySelector string.</p>
<h3 id="vm-$before(_element|selector,_[callback]_)">vm.$before( element|selector, [callback] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>Insert the vm’s <code>$el</code> before target element.</p>
<h3 id="vm-$after(_element|selector,_[callback]_)">vm.$after( element|selector, [callback] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code></li>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>Insert the vm’s <code>$el</code> after target element.</p>
<h3 id="vm-$remove(_[callback]_)">vm.$remove( [callback] )</h3><ul>
<li><strong>callback</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>Remove the vm’s <code>$el</code> from the DOM.</p>
<h2 id="Lifecycle">Lifecycle</h2><h3 id="vm-$mount(_[element|selector]_)">vm.$mount( [element|selector] )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code> | <strong>selector</strong> <code>String</code> <em>optional</em></li>
</ul>
<p>If the Vue instance didn’t get an <code>el</code> option at instantiation, you can manually call <code>$mount()</code> to assign an element to it and start the compilation. If no argument is provided, an empty <code>&lt;div&gt;</code> will be automatically created. Calling <code>$mount()</code> on an already mounted instance will have no effect. The method returns the instance itself so you can chain other instance methods after it.</p>
<h3 id="vm-$destroy(_[remove]_)">vm.$destroy( [remove] )</h3><ul>
<li><strong>remove</strong> <code>Boolean</code> <em>optional</em></li>
</ul>
<p>Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives and remove its <code>$el</code> from the DOM. Also, all <code>$on</code> and <code>$watch</code> listeners will be automatically removed.</p>
<h3 id="vm-$compile(_element_)">vm.$compile( element )</h3><ul>
<li><strong>element</strong> <code>HTMLElement</code></li>
</ul>
<p>Partially compile a piece of DOM (Element or DocumentFragment). The method returns a <code>decompile</code> function that tearsdown the directives created during the process. Note the decompile function does not remove the DOM. This method is exposed primarily for writing advanced custom directives.</p>
<h3 id="vm-$addChild(_[options,_constructor]_)">vm.$addChild( [options, constructor] )</h3><ul>
<li><strong>options</strong> <code>Object</code> <em>optional</em></li>
<li><strong>constructor</strong> <code>Function</code> <em>optional</em></li>
</ul>
<p>Adds a child instance to the current instance. The options object is the same in manually instantiating an instance. Optionally you can pass in a constructor created from <code>Vue.extend()</code>.</p>
<p>There are three implications of a parent-child relationship between instances:</p>
<ol>
<li>The parent and child can communicate via <a href="#Events">the event system</a>.</li>
<li>The child has access to all parent assets (e.g. custom directives).</li>
<li>The child, if inheriting parent scope, has access to parent scope data properties.</li>
</ol>

    <div class="footer">Caught a mistake or want to contribute to the documentation? <a href="https://github.com/vuejs/vuejs.org" target="_blank">Fork this site on Github</a>!</div>
</div>
                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        
    </body>
</html>